<template>
  <div class="pay-page" ref="pageRef">
    <div class="pay-nav" v-if="navOps.length > 1">
      <div class="pay-nav_item"
        v-for="it in navOps"
        :key="it.value"
        :class="{'on': navActive === it.value}"
        @click="navActive=it.value">
        <svg-icon :iconClass="it.icon"/>
        <span>{{it.title}}</span>
      </div>
    </div>
    <KeepAlive>
      <template v-if="navActive==='energy'">
        <PayEnergy :openPos="windowName"
          @paySuccess="paySuccess('energy')"
          :fnList="fnList"
          :pkgId="pkgId"
          class="pay-com"/>
      </template>

      <template v-else-if="showPay">
        <PayRight v-if="packages[navActiveIndex]&&packages[navActiveIndex].tag !== 3"
          :openPos="windowName"
            :packages="packages[navActiveIndex]"
            @paySuccess="paySuccess('right')"
            class="pay-com"
          />
          <RightsListV2 v-else :packages="packages[navActiveIndex]"/>
      </template>
    </KeepAlive>
    <energyRule v-if="showEnergy" :data="fnList"/>
  </div>
</template>
<script>
import { mapGetters } from 'vuex'
import scenecouponMixin from '@/mixins/scene-coupon.js'
import PayRight from './right/index.vue'
import RightsListV2 from '@/components/member/rights-list-v2'
import PayEnergy from './energy/index.vue'
import energyRule from './energy/energy-rule'

import { isPassVersionByApp } from '@/utils/judge'
import { getFnListApi } from '@/api/energy'
export default {
  name: 'PayV2',
  mixins: [scenecouponMixin],
  components: {
    PayRight,
    PayEnergy,
    energyRule,
    RightsListV2
  },

  props: {
    packages: {
      type: Array,
      default: () => []
    },
    showPay: {
      type: Boolean,
      default: true
    },
    windowName: String
  },
  data () {
    return {
      navActive: '',
      hasPayRight: false,
      hasPayEnergy: false,
      fnList: []
    }
  },
  computed: {
    ...mapGetters(['appInfo']),
    pkgId () {
      const { pkgid } = this.$route.query
      return pkgid || this.packages[0]?.pkg_id
    },
    showEnergy () {
      return isPassVersionByApp({
        '22': { v: '3.3.0.14' },
        '111': { v: '3.2.10.0' }
      })
    },
    navActiveIndex () {
      const num = Number(this.navActive.slice(3))
      const index = isNaN(num) ? 0 : num

      return index < 0 ? 0 : index
    },
    navOps () {
      const list = []
      this.packages.length && this.packages.forEach((item, index) => {
        const title = item.name.replace(/(权益包)|VIP/, '') || '桌面会员'

        // 终身会员不用显示tab
        if (item.tag !== 3) {
          list.push({
            icon: 'vip2',
            title: title,
            value: `vip${index}`
          })
        }
      })

      if (this.showEnergy) {
        list.push({
          icon: 'bag',
          title: 'AI能量包',
          value: 'energy'
        })
      }
      return list
    }
  },
  watch: {
    'navOps.length' () {
      if (!this.navOps.some(({ value }) => value === this.navActive)) {
        this.navActive = this.navOps[0]?.value || null
      }
    }
  },
  created () {
    const { tab } = this.$route.query
    if (this.navActive !== tab && this.navOps.some(({ value }) => value === tab)) {
      this.navActive = tab
    }
    if (!this.showPay) {
      this.navActive = 'energy'
    }
    if (!this.navActive) {
      this.navActive = 'vip0'
    }
    this.toFixFn = false
    this.init()
    this.$eventBus.$on('pay-v2-action', this.toPageForParam)
  },
  beforeDestroy () {
    this.$eventBus.$off('pay-v2-action', this.toPageForParam)
  },
  methods: {
    toPageForParam (data) {
      const stat_id = parseInt(data.stat_id)
      if (stat_id) {
        this.$xz('xz_set_stat_id', stat_id)
      }

      if (data.action === 'seeFnPrice') {
        this.navActive = 'energy'
        this.$nextTick(() => {
          if (this.fnList.length) {
            this.scrollPage(99999999999)
          } else {
            this.toFixFn = true
          }
        })
      } else if (data.action === 'jgb') {
        this.navActive = 'energy'
        this.scrollPage(0)
      } else if (data.action === 'vip') {
        this.navActive = 'vip0'
        this.scrollPage(0)
      }
    },
    scrollPage (h) {
      let el
      if (this.windowName === 'XZDesktopOrderVIP') {
        el = this.$refs.pageRef
      } else {
        el = document.querySelector('.app-main')
      }
      if (!el) return
      el.scrollTo(0, h)
    },
    async init () {
      if (this.showEnergy) {
        this.getFnList()
      }
    },
    getFnList () {
      getFnListApi()
        .then(res => {
          this.fnList = (res.data?.list || []).map(({ price, name, fn_id }) => ({ price, name, fn_id }))
          this.$nextTick(() => {
            // eslint-disable-next-line no-unused-expressions
            this.toFixFn && this.$refs.pageRef?.scrollTo(0, 99999999999)
          })
        })
    },
    paySuccess (type) {
      if (type === 'energy') {
        this.hasPayEnergy = true
      } else {
        this.hasPayRight = true
      }
      this.$emit('paySuccess')
    }
  }
}
</script>
<style scoped lang="scss">
.pay-page{
  height: 100%;
  padding: 20px 0;
  background: #34353B;
  overflow: auto;
  overflow-y: scroll;
}
.pay-nav{
  height: 32px;
  border-bottom: 1px solid rgba(255,255,255,0.1);
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 80px;
}
.pay-nav_item{
  font-weight: bold;
  font-size: 14px;
  color: rgba(255, 255, 255, .7);
  position: relative;
  cursor: pointer;
  &:hover{
    color: rgba(255, 255, 255, 1);
  }
  &.on{
    color: #F8DE9D;
    &::before {
      opacity: 1;
      width: 38px;
    }
  }
  &::before {
    content: '';
    position: absolute;
    bottom: -8px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 3px;
    background: #F8DE9D;
    border-radius: 10px;
    opacity: 0;
    transition: all .1s ease;
  }
  .svg-icon{
    font-size: 18px;
    margin-right: 6px;
  }
}

.pay-com{
  padding: 0 14px 0 20px;
}
</style>
